<template>
  <div class="cart">
    <ul>
      <li>
        <span>头像</span>
        <div class="myRight">
          <span class="poto"></span>
          <van-icon style="opacity: 0.5" name="arrow" />
        </div>
      </li>
      <li>
        <span>用户名</span>
        <div class="myRight">
          <span class="text">神话</span>
          <van-icon style="opacity: 0.5" name="arrow" />
        </div>
      </li>
      <li>
        <van-cell :value='sex' is-link title="性别" @click="show = true" />
        <van-action-sheet v-model="show" :actions="actions" @select="onSelect" cancel-text="取消" />
      </li>
      <li>
        <span>绑定手机</span>
        <div class="myRight">
          <span class="text">156-7134-5566</span>
          <!-- <van-icon style="opacity: 0.5" name="arrow" /> -->
        </div>
      </li>
      <li>
        <span>绑定微信</span>
        <div class="myRight">
          <span class="text">已绑定</span>
          <van-icon style="opacity: 0.5" name="arrow" />
        </div>
      </li>
      <li
      is="router-link"
      to="/address"
      tag="li"
      >
        <span>收货地址</span>
        <div class="myRight">
          <span class="text"></span>
          <van-icon style="opacity: 0.5" name="arrow" />
        </div>
      </li>
    </ul>
    <van-button class="out" size="large" type="info">退出登录</van-button>
  </div>
</template>

<script>
import Vue from 'vue'
import { Icon, ActionSheet, Toast, Cell, Button } from 'vant'

Vue.use(Icon)
Vue.use(ActionSheet)
Vue.use(Toast)
Vue.use(Cell)
Vue.use(Button)
export default {
  name: 'cart-index',
  data () {
    return {
      show: false,
      actions: [{ name: '男' }, { name: '女' }],
      sex: '请选择'
    }
  },
  methods: {
    onSelect (item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.sex = item.name
      this.show = false
      Toast(item.name)
    }
  }
}
</script>

<style lang="scss" scoped>
.cart{
  ul{
    padding: 0 17px;
    li{
      height: 50px;
      border-bottom: 1px solid #ccc;
      line-height: 50px;
      margin-top: 8px;
    }
  }
  .myRight{
    float: right;
    // display: flex;
    .poto{
      // display: block;
      float: left;
      margin-top: 6px;
      margin-right: 12px;
      height: 30px;
      width: 30px;
      border: 1px solid rgb(37, 36, 36);
      border-radius: 50%;
    }
    .text{
      margin-right: 12px;
    }
  }
}
.van-cell{
  padding: 0;
  line-height: 3;
  font-size: 17px;
}
.van-cell__left-icon, .van-cell__right-icon{
  line-height: 50px;
}
.out{
  position: fixed;
  bottom: 17px;
}
</style>
